<template>
    <el-dialog v-model="visible" :destroy-on-close="true" :width="600" top="5" :title="`${dialogData.title}`">
        <el-form ref="ruleFormRef" :rules="rules" :model="formData" label-width="100px">
            <el-form-item label="联系类型" prop="contactType" clearable required>
                <el-select v-model="formData.contactType" class="m-2" placeholder="请选择联系类型">
                        <el-option v-for="item in Dict.getList('contact')" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
            </el-form-item>
            <el-form-item label="联系方式" prop="contact" clearable required>
                <el-input v-model="formData!.contact" placeholder="请输入联系方式"></el-input>
            </el-form-item>
            <el-form-item label="排序值" prop="sort" clearable>
                <el-input-number v-model="formData!.sort" placeholder="请输入排序值" :min="0"/>
            </el-form-item>
            <el-form-item label="备注" prop="remark" clearable>
                <el-input v-model="formData.remark" :rows="2" type="textarea" placeholder="请输入备注信息" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive, defineExpose } from 'vue';
import { Dict } from "/@/utils/storage";
import { ElMessage, FormInstance, FormRules, ElMessageBox } from 'element-plus';
import { useModal } from '/@/hooks/useModal';
import rulesObj from './rules';

const formData = reactive<any>({
    id: '',
    personId: '',
    contactType: '',
    contact: '',
    sort: '',
    remark: '',
});

//验证规则
const rules = reactive<FormRules>(rulesObj);

const ruleFormRef = ref<FormInstance>();
const { visible, acceptParams, handleSubmit, dialogData } = useModal(formData, ruleFormRef)

defineExpose({
    acceptParams
});
</script>
